.bottom-charts {
  position: absolute;
  // left: 50%;
  left: 24px;
  bottom: 24px;
  // width: 1860px;
  // width: 1388px;
  display: flex;
  justify-content: space-between;
  // transform: translateX(-36%);
  // transform: translateX(-50%);
  z-index: 10;
  text-align: left;
  flex-wrap: wrap;
  .chart-box {
    &-title {
      position: relative;
      padding-left: 56px;
      line-height: 48px;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      font-size: 18px;
      background: linear-gradient(270deg, rgba(#202f37, 0.65) 0%, rgba(#1e272d, 0.65) 100%);
      // &::after {
      //   display: block;
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   z-index: -1;
      //   content: '';
      //   height: 48px;
      //   background: linear-gradient(
      //     90deg,
      //     rgba(21, 172, 237, 0.4) 0%,
      //     rgba(21, 172, 237, 0.3) 100%
      //   );
      //   opacity: 0.5;
      // }
      &::before {
        position: absolute;
        left: 16px;
        top: 8px;
        content: url('../../../common/images/标题.png');
      }
    }
    &-body {
      position: relative;
      height: 240px;
      // background: url('../../../common/images/bg.png');
      // box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.1);
      // border: 1px solid rgba(255, 255, 255, 0.1);
      border-top: 0;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(#131b20, 0.85) 0%, rgba(#091218, 0.85) 100%);
      &__scroll {
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 6px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: rgba(#ffffff, 0.2);
          border-radius: 4px;
        }
        &::-webkit-scrollbar,
        &::-webkit-scrollbar-thumb {
          overflow: visible;
        }
        &::-webkit-scrollbar-track {
          width: 8px;
        }
      }
    }
  }
}

.chartHead {
  display: flex;
  justify-content: space-between;
  align-items: center;

  :global(.ant-select) {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 22px;
    height: 24px;
    margin-right: 8px;

    > :global(.ant-select-selector) {
      height: 24px;
      border: none !important;
      line-height: 22px;
      padding: 0 8px;
    }
  }
  :global {
    .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
      .ant-select-selector {
      border-color: transparent;
      border-right-width: 1px !important;
      outline: 0;
      box-shadow: none;
    }

    .ant-select-single .ant-select-selector .ant-select-selection-item,
    .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
      line-height: 22px;
    }
  }

  &Hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
  }

  :global {
    .ant-switch {
      margin-left: 4px;
      margin-right: 8px;
    }
  }
}
